// 获取数据渲染
async function student() {
    const { data: res } = await axios.get('/students')
    // console.log(res)
    let arr = res.data.map(item => {
        return `
                <tr>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender ? '女' : '男'}</td>
                <td>第${item.group}组</td>
                <td>${item.hope_salary}</td>
                <td>${item.salary}</td>
                <td>${item.province} ${item.city} ${item.area}</td>
                <td>
                <a href="javascript:;" class="text-success mr-3">
                    <i data-id="${item.id}" class="bi bi-pen"></i>
                </a>
                <a href="javascript:;" class="text-danger">
                    <i data-id="${item.id}" class="bi bi-trash"></i>
                </a>
                </td>
            </tr>
        `
    })
    document.querySelector('tbody').innerHTML = arr.join('')
    document.querySelector('.total').innerHTML = arr.length
}
student()


// 初始化模态框
let modal = new bootstrap.Modal(document.querySelector('#modal'))


// 点击添加让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
    modal.show()
    document.querySelector('#modal h5').innerHTML = '添加学员'
    // 重置表单
    document.querySelector('#form').reset()
})


// 省市县联动
let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')

// 获取省并渲染
async function getProvince() {
    const { data: res } = await axios.get('/api/province')
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = `<option value="">--省--</option>` + arr.join('')
}

// 获取市并渲染
async function getCity() {
    area.innerHTML = `<option value="">--地区--</option>`
    if (province.value = '') {
        city.innerHTML = `<option value="">--城市--</option>`
        return
    }
    const { data: res } = await axios.get('/api/city', { params: { pname: province.value } })
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML = `<option value="">--城市--</option>` + arr.join('')
}

// 获取县并渲染
async function getArea() {
    if (city.value = '') {
        area.innerHTML = `<option value="">--地区--</option>`
        return
    }
    const { data: res } = await axios.get('/api/area', { params: { pname: province.value, cname: city.value } })
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = `<option value="">--地区--</option>` + arr.join('')
}


// 获取省
getProvince()
// 切换省的时候获取市
province.addEventListener('change', getCity)
// 切换市的时候获取县
city.addEventListener('change', getArea)



// 提交表单
document.querySelector('#submit').addEventListener('click',async function(e) {
    e.preventDefault()
    let data = val(document.querySelector('#form'))
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.salary = +data.salary
    data.hope_salary = +data.hope_salary
    let title = document.querySelector('#modal h5.modal-title')
  if (title.innerHTML === '添加学员') {
    const { data: res } = await axios.post('/students', data)
    message.success(res.message) 
  } else {
    let id = title.dataset.id
    const { data: res } = await axios.put(`/students/${id}`, data)
    message.success(res.message) 
  }
    
    modal.hide()
    student()
})



// 删除和修改
document.querySelector('tbody').addEventListener('click',async function(e) {
    if (e.target.classList.contains('bi-trash')) {
        if (!confirm('你确定要删除吗？')) return
        let id = e.target.dataset.id
        await axios({
            method: 'DELETE',
            url: `/students/${id}`
          })
        message.success('删除成功')
        student()
    }
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        const {data:res} = await axios.get('/students/' + id)
        modal.show()
        let title = document.querySelector('#modal h5')
        title.innerHTML = '修改学员'
        title.setAttribute('data-id', id)
        province.value = res.data.province
        await getCity()
        city.value = res.data.city
        await getArea()
        val(document.querySelector('#form'), res.data)
    }
})
